<template>
  <div class="fullScreen mobile">
    <div class="hp100">
      <!-- prettier-ignore -->
      <div class="client-video">
        <div class="video-box">
          <LiveVideo class="video-box" ref="video"></LiveVideo>
        </div>
      </div>

      <div class="client-video-container dis-flex flex-sbc">
        切换直播线路：
        <button
          :class="{ btn: true, action: 解决方案 == 1 }"
          @click="switchLine(1)"
        >
          <span class="pl12 pr12">线路1</span>
        </button>
        <button
          :class="{ btn: true, action: 解决方案 == 2 }"
          @click="switchLine(2)"
        >
          <span class="pl12 pr12">线路2</span>
        </button>
        <button class="btn" @click="switchLine()">
          <i class="fa fa-fw fa-rotate-right"></i>
        </button>
      </div>
      <div class="client-bottom">
        <!-- prettier-ignore -->
        <div class="tabs dis-flex flex-sac" ref="tabs">
          <div :class="{ tab: true, active: activeTag == '互动' }" @click="activeTag = '互动'">互动
            <small class="fc-grey50">（{{ roomInfo.nOnline }}在线热度）</small></div>
          <div :class="{ tab: true, active: activeTag == '介绍' }" @click="activeTag = '介绍'">介绍
          </div>
        </div>
        <div class="tabs-panel" ref="tabsPanel">
          <div class="panel" v-show="activeTag == '互动'">
            <!-- <pre>{{ objres }}</pre> -->
            <ChatByCus></ChatByCus>
          </div>
          <div class="panel" v-show="activeTag == '介绍'">
            <!-- <pre>{{ BrowserType }}</pre> -->
            <div class="title">
              {{ roomInfo.title }}
            </div>
            <div class="desc" v-html="roomInfo.richText"></div>

            <button
              type="button"
              class="btn btn-block btn-orange btn-exit"
              @click="exit(true)"
            >
              退出登录
            </button>
          </div>
        </div>
      </div>
      <div class="client-foot align-cm">
        {{ $version }}
      </div>
      <WS></WS>
    </div>
  </div>
</template>

<script>
import { BrowserType } from '@/assets/BrowserType.js';
import { bus } from '@/bus.js';
export default {
  name: '',
  components: {
    LiveVideo: () => {
      return import('../components/liveVideo.vue');
    },
    ChatByCus: () => {
      return import('../components/ChatByCus.vue');
    },
    WS: () => {
      return import('../components/chat/wsChat.vue');
    },
  },
  data() {
    return {
      BrowserType: BrowserType(),
      bt: '',
      activeTag: '互动',
      roomInfo: {
        id: '',
        title: '',
        cover: '',
        m3u8Stream: '',
        flvStream: '',
        nOnline: 0,
        richText: '',
      },
      caleHeight: 0,
      解决方案: '1',
      objres: null, //测试用
    };
  },
  methods: {
    ajaxData: function() {
      let params = { roomId: this._.get(this.$route, 'query.roomId') };

      this.$api.获取直播间具体内容(params).then((res) => {
        // this.objres = res.data;
        if (res.code == 200) {
          // res.data.videoLiveUrl =
          //   'https://cn-zjjh-ct-04-31.bilivideo.com/live-bvc/984082/live_527383938_81074710_2500/index.m3u8?expires=1753240535&len=0&oi=1032016728&pt=web&qn=250&trid=10070f64a3d4408961d45618eea7ec688045&bmt=1&sigparams=cdn,expires,len,oi,pt,qn,trid,bmt&cdn=cn-gotcha01&sign=9c396826a5a5b46ac1f630a679dcd1b3&site=0db6f8feda72d1fed6cb7523102e254b&free_type=0&mid=400216183&sche=ban&bvchls=1&sid=cn-zjjh-ct-04-31&chash=1&sg=lr&trace=17&isp=ct&rg=East&pv=Fujian&pp=rtmp&strategy_id=25&long_ab_flag=live_default_longitudinal&media_type=0&expected_qn=250&origin_bitrate=1521235&long_ab_id=45&strategy_types=0,1&strategy_version=latest&sl=1&suffix=2500&ld=jchz&strategy_type=0&codec=0&deploy_env=prod&long_ab_flag_value=test&hdr_type=0&strategy_ids=25,25&source=puv3_onetier&hot_cdn=0&info_source=cache&sk=8c166c1ca3b5fa48e596dd6621b7fcf2&score=36&flvsk=ff504a7598ad34691e5288b7a3a16c99&p2p_type=1&vd=nc&zoneid_l=151371777&sid_l=live_527383938_81074710_2500&src=puv3&order=1';
          this.roomInfo.id = res.data.roomId;
          this.roomInfo.title = res.data.roomName;
          this.roomInfo.richText = res.data.roomShortInfo;
          this.roomInfo.m3u8Stream = res.data.videoLiveUrl;
          setTimeout(() => {
            bus.$emit('获得推流地址', res.data);
          }, 1000 * 1);
        } else {
          this.$toasted.show('获取直播间具体内容失败' + res.code);
        }
      });
    },
    exit: function(isActive) {
      window.localStorage.removeItem('userPwd');

      if (isActive) {
        if (!this.BrowserType.是移动端) {
          let q = this.$route.query;
          delete q.roomId;
          this.$router.push({
            path: '/enterList',
            query: { ...q },
          });
        } else {
          this.$router.push({
            path: `/login`,
            query: { ...this.$route.query },
          });
        }
      } else {
        this.$toasted.show('您的账号可能在其他地方登录', {
          duration: 1000 * 2,
          onComplete: () => {
            this.$router.push({
              path: `/login`,
              query: { ...this.$route.query },
            });
          },
        });
      }
    },
    switchLine: function(num) {
      if (num) this.解决方案 = num;
      this.$toasted.show('正在为您切换适合的频道', {
        type: 'info',
        duration: 1000 * 0.7,
        onComplete: () => {
          if (this.解决方案 == 1) {
            this.$router.push({
              path: `/login`,
              query: { ...this.$route.query },
            });
          }
          if (this.解决方案 == 2) {
            bus.$emit('replayer');
          }
        },
      });
    },
  },
  mounted: function() {
    // setTimeout(() => {
    //   bus.$emit(
    //     '获得推流地址',
    //     Object.assign(
    //       {},
    //       {
    //         videoLiveUrl:
    //           'https://d1--cn-gotcha209.bilivideo.com/live-bvc/956922/live_21144080_bs_1882969_av1/index.m3u8?expires=1752142570&len=0&oi=1964825814&pt=web&qn=400&trid=10073439329539a492a6728fd7ed07686f84&bmt=1&sigparams=cdn,expires,len,oi,pt,qn,trid,bmt&cdn=cn-gotcha209&sign=538d3a5928846d541fa4aa69c5a48719&site=6b9c32942bacaa40669846a9a3e5eb74&free_type=0&mid=400216183&sche=ban&bvchls=1&trace=16&isp=ct&rg=East&pv=Fujian&strategy_type=0&long_ab_flag=live_default_longitudinal&flvsk=&sl=9&info_source=hot_cache&deploy_env=prod&hdr_type=0&origin_bitrate=690246&pp=rtmp&score=100&expected_qn=400&ld=kpl&strategy_id=55&codec=2&strategy_version=latest&source=puv3_onetier&hot_cdn=909765&strategy_types=0&suffix=av1&strategy_ids=55&long_ab_id=45&long_ab_flag_value=test&sk=42eced9eee4cb9a201ed166a9ec6f444&p2p_type=1&vd=bc&src=puv3&order=1',
    //         roomBgImg:
    //           'https://pic.rmb.bdstatic.com/bjh/240808/649e5c58fb3d599364abc2c282082a744342.jpeg@h_1280',
    //       }
    //     )
    //   );
    // }, 1000 * 1);

    this.ajaxData();
    bus.$on('当前用户可能异地登录', (msg) => {
      this.exit();
    });
    bus.$on('某房间在线人数更新', (wsMsg) => {
      if (wsMsg.roomId == this.roomInfo.id) {
        this.$set(this.roomInfo, 'nOnline', wsMsg.memberCount);
      }
    });
  },
  beforeUpdate() {},
  beforeDestroy() {
    bus.$off('当前用户可能异地登录');
  },
};
</script>

<style scoped lang="less" src="./client.less"></style>
